<template>
  <div class="shopping" style="background: #f3f4f6">
    <div class="location-box">
      您现在的位置：<a href="#"></a>&gt;<a href="#">购物车</a>
    </div>
    <div class="layout">
      <div class="payment-role ml22">
        <h3 class="cart-title pt18">收货角色信息</h3>
        <div class="mt24">
          <div
            id="role_binded"
            class="bind-role clearfix"
            style="display: none"
          >
            <div class="fl">
              <span class="label">当前绑定角色：</span>
              <strong id="role-binded-area"></strong>
              <strong id="role-binded-server"></strong>
              <strong id="role-binded-rolename"></strong>
            </div>
            <a
              id="select-binded-role"
              href="#"
              class="fl btn-com btn-change"
              title="更换角色信息"
              >更换角色信息</a
            >
          </div>
          <div class="pay-group role clearfix" id="step_1">
            <span class="label">选择游戏角色：</span>
            <ul>
              <li>
                <select v-model="c" style="" name="area" id="area">
                  <option value="" selected>请输入地区</option>
                  <option :value="item.id" v-for="item in b" :key="item.id">
                    {{ item.province }}
                  </option>
                </select>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cartlist mt10 ml22 clearfix">
        <h2 class="cart-title">商品信息</h2>
        <div class="loading">
          <table border="1">
            <tr style="border-bottom: 1px dotted #dedfde">
              <th>
                <input
                  type="checkbox"
                  :checked="isCheckedAll"
                  @change="SelectAll($event)"
                />全选
              </th>
              <th>商品名称</th>
              <th>类型</th>
              <th>单价</th>
              <th>期限</th>
              <th>数量</th>
              <th>优惠</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in cartList" :key="item.id">
              <td>
                <input
                  type="checkbox"
                  :checked="item.checked == 1"
                  @change="Status(item.id, $event)"
                />
              </td>
              <td
                style="
                  display: flex;
                  justify-content: center;
                  line-height: 30px;
                "
              >
                <img
                  :src="item.cover"
                  width="39"
                  height="39"
                  style="margin-top: 5px"
                  alt="复仇道具卡（1个）"
                /><span>{{ item.goodsName }}</span>
              </td>
              <td>
                <span>{{ item.type }}</span>
              </td>
              <td>
                <span class="mr5">{{ item.price }}</span
                >Q币
              </td>
              <td>{{ item.count }}</td>
              <td>
                <button
                  style="width: 15px; height: 28px"
                  @click="add(item.id, item.term, '-')"
                >
                  -
                </button>
                <input
                  name="good_num"
                  type="text"
                  class="cart-amount tac"
                  :value="item.term"
                  style="width: 38px; height: 24px"
                />
                <button
                  style="width: 15px; height: 28px"
                  @click="add(item.id, item.term, '+')"
                >
                  +
                </button>
              </td>
              <td>
                <span class="ht font_red">{{ item.discount }}</span>
              </td>
              <td>
                <span class="mr5">{{ item.term * item.price }}</span
                >Q币
              </td>
              <td class="td">
                <button class="bt" @click="AddFollow(item.id)">关注</button
                >&nbsp;&nbsp;&nbsp;<button class="bt" @click="remove(item.id)">
                  删除
                </button>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="yhq_info" class="cart-benefit ml22 clearfix">
        <h2 class="cart-title">您的优惠信息</h2>
        <div id="tab_gwd" class="tcon" style="">
          <a href="#" class="toggle" id="btnUseGwd"
            ><s class=""></s>使用购物点（<span class="font_red gwd_num">0</span
            >）</a
          >
          <a href="#" class="link" target="_blank">[查看购物点使用说明]</a>
        </div>
        <div class="cart_t1 cart-t1">
          <span
            style="
              float: left;
              display: inline-block;
              color: red;
              font-weight: bold;
              font-size: 12px;
              text-align: left;
            "
            ><span
              style="
                max-width: 320px;
                overflow: hidde;
                word-wrap: break-word;
                float: left;
              "
              >下载掌上道聚城享更多福利</span
            ><a href="#" target="_blank">查看详情</a></span
          >
          <span id="price_info" style="">
            总价:<span class="font_red_b" id="js_total_QB"></span> -
            优惠券:<span class="font_red_b" id="js_yhq_QB"></span> -购物点:<span
              class="font_red_b"
              id="js_gwd_QB"
            ></span>
            =
          </span>
          实付款:<span id="js_real_QB_area"
            ><span class="red fwb ft24" id="js_real_QB">&nbsp;&nbsp;{{ this.sum }}&nbsp;&nbsp;</span
            >Q币</span
          >
          <span id="js_real_DQ_area" style="display: none">
            <span class="red fwb" id="js_real_DQ"></span>点券</span
          >
          <div class="confirm-bar" id="step_2">
            <a class="btn-confirm" @click="submitOrderAll">提交订单</a>
          </div>
        </div>
      </div>
      <div class="payment-rules" style="padding-bottom: 22px; height: auto">
        <h3 class="cp-title">温馨提示：</h3>
        <ol>
          <li>
            <div>
              "购买成功后系统会自动发货，如发货失败24小时内会自动补发！"
            </div>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { queryCart, queryProvince, queryAddFollow } from '@/api/goods'
export default {
  name: 'shopping',
  data () {
    return {
      a: [],
      b: [],
      c: ''
    }
  },
  mounted () {
    this.sf()
    this.getCartList()
  },
  computed: {
    ...mapState('cart', ['cartList']),
    sum () {
      let sum1 = 0
      this.cartList.forEach((item) => {
        if (item.checked === '1') {
          sum1 += item.price * item.term
        }
      })
      return sum1
    },
    isCheckedAll () {
      return (
        this.cartList.every((item) => item.checked === '1') &&
        this.cartList.length !== 0
      )
    }
  },
  methods: {
    ...mapActions('cart', ['getCartList']),
    async remove (id) {
      await this.$store.dispatch('cart/queryRemove', id)
      this.getCartList()
    },
    async add (id, num, type) {
      if (type === '+') {
        await queryCart(id, ++num)
      }
      if (num <= 1) return
      if (type === '-') {
        await queryCart(id, --num)
      }
      this.getCartList()
    },
    async sf () {
      const res = await queryProvince()
      this.b = res
    },
    async Status (uid, e) {
      const isChecked = e.target.checked ? 1 : 0
      await this.$store.dispatch('cart/changeCartChecked', { uid, isChecked })
      this.getCartList()
    },
    async SelectAll (e) {
      const isChecked = e.target.checked ? 1 : 0
      await this.$store.dispatch('cart/changeAllChecked', isChecked)
      this.getCartList()
    },
    async submitOrder () {
      const id = this.cartList.filter((item) => {
        return item.checked === '1'
      })
      if (id.length >= 2) {
        return alert('只能提交单个')
      }
      if (!this.c) return alert('角色id必须要')
      if (!id.length) return alert('商品id必须要')
      await this.$store.dispatch('cart/queryAddQuery', {
        id: id[0].id,
        userId: this.c
      })
      await this.remove(id[0].id)
    },
    async submitOrderAll () {
      if (!this.c) return alert('角色id必须要')
      await this.$store.dispatch('cart/filterId')
      await this.$store.dispatch('cart/queryAddQueryAll', { userId: this.c })
      await this.$store.dispatch('cart/queryRemoveAll')
      this.$message.success('提交成功')
      this.getCartList()
    },
    async AddFollow (id) {
      const time = this.getCurrentTime()
      await queryAddFollow(id, time)
      alert('关注成功')
    },
    getCurrentTime () {
      // 获取当前时间并打印
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      const ss =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      const time = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.location-box {
  margin: 24px auto 8px;
  width: 1190px;
  color: #606060;
  height: 18px;
  position: relative;
  zoom: 1;
  cursor: pointer;
}
.layout {
  width: 1200px;
  margin: 0 auto;
  background: #fafbfc;
  .ml22 {
    margin-left: 22px;
  }
  .payment-role {
    .cart-title {
      margin-bottom: 14px;
      width: 1146px;
      font-size: 14px;
      color: #222;
      height: 22px;
      border-bottom: 1px solid #ddd;
      text-indent: 2px;
    }
    .pt18 {
      padding-top: 18px;
    }
    .pay-group {
      display: flex;
      line-height: 30px;
      select {
        width: 175px;
        height: 30px;
      }
    }
  }
  .cartlist {
    padding-top: 15px;
    width: 1143px;
    .cart-title {
      margin-bottom: 14px;
      width: 1146px;
      font-size: 14px;
      color: #222;
      height: 22px;
      border-bottom: 1px solid #ddd;
      text-indent: 2px;
    }
    .loading {
      display: table;
      width: 100%;
      background: #fff;
      text-align: center;
      margin-top: 40px;
      table {
        width: 1143px;
        margin: 0 auto;
        background: #eee;
        border: 0;
        tr {
          border-bottom: 1px dotted rgb(222, 223, 222);
          th {
            height: 30px;
            border: 0;
          }
          td {
            height: 40px;
            border: 0;
            img {
              margin-right: 5px;
              width: 39px;
              height: 28px;
            }
            .bt {
              border: 0;
              color: blue;
            }
          }
        }
      }
    }
  }
  .mt10 {
    margin-top: 10px;
  }
  .cart-benefit {
    margin-top: 16px;
    padding-bottom: 22px;
  }
  .cart-title {
    margin-bottom: 14px;
    width: 1146px;
    font-size: 14px;
    color: #222;
    height: 22px;
    border-bottom: 1px solid #ddd;
    text-indent: 2px;
  }
  #yhq_info {
    .tcon {
      margin-top: 15px;
    }
    s {
      float: left;
      width: 12px;
      height: 12px;
      background: url(//daoju.qq.com/market/common/v_2_1/images/comm_ico.png)
        no-repeat -61px -718px;
      overflow: hidden;
      margin: 3px 5px 0 0;
    }
    a {
      color: #505050;
    }
    a.link {
      color: #1c8bde;
      margin-left: 10px;
      text-decoration: underline;
      font-weight: 400;
    }
    .cart-t1 {
      margin: 20px 18px 50px 0;
      background: #fffeee;
      border: 1px solid #ddd;
      height: 56px;
      line-height: 56px;
      display: block;
      padding: 0 170px 0 32px;
      color: #222;
      font-size: 14px;
      text-align: right;
      position: relative;
      .confirm-bar {
        position: absolute;
        right: 0;
        top: -1px;
        z-index: 10;
        width: 160px;
        height: 57px;
        display: flex;
      }
      .btn-confirm {
        display: block;
        width: 100%;
        height: 57px;
        text-align: center;
        line-height: 57px;
        background: #f74a4a;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .payment-rules {
    margin-left: 22px;
    height: 175px;
    .cp-title {
      margin-bottom: 14px;
      width: 1146px;
      font-size: 14px;
      color: #222;
      height: 22px;
      border-bottom: 1px solid #ddd;
      text-indent: 2px;
      text-align: left;
    }
  }
}
</style>
